<template>
  <div ref="capsuleChart"  class="data-base">
    <dv-capsule-chart :config="config" style="width:100%; height: 100%"/>
    <div class="student" v-if="isShowStudent">
      <div class="old_student">老生（仅开开团）</div>
      <div class="progress">
        <div class="progress_old" :style='oldWidth'> {{ oldStudent }} </div>
        <div class="progress_new" :style='newWidth'> {{ newStudent }} </div>
      </div>
      <div class="new_student">新生（可开团/参团）</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "oneColumnUpBox",
  props: {
    browseNumber: {
      type: Number,
      default: 0
    },
    personBrowseNumber: {
      type: Number,
      default: 0
    },
    orderNumber: {
      type: Number,
      default: 0
    },
    shareNumber: {
      type: Number,
      default: 0
    },
    isShowStudent: {
      type: Boolean,
      default: true
    },
    oldStudent: {
      type: Number,
      default: 0
    },
    newStudent: {
      type: Number,
      default: 0
    },
    leftUpBoxHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      config: {
        data: [
          {
            name: '浏览次数',
            value: this.browseNumber
          },
          {
            name: '浏览人数',
            value: this.personBrowseNumber
          },
          {
            name: '报名次数',
            value: this.orderNumber
          },
          {
            name: '分享次数',
            value: this.shareNumber
          }
        ],
        colors: ['#e062ae', '#55e7be', '#ffc860', '#96bfff'],
        unit: '/次数',
        showValue: true
      }
    }
  },
  watch: {
    leftUpBoxHeight: {
      handler(val) {
        console.log('父传入',this.leftUpBoxHeight)
        this.initHeight();
      }
    }
  },
  mounted() {
    this.initHeight()
  },
  computed: {
    oldWidth() {
      console.log('执行时间')
      let ow = 50;
      let total = this.oldStudent + this.newStudent;
      if (total > 0) {
        let percentage = (this.oldStudent / total) * 100;
        ow = percentage.toFixed(2);
      }
      return 'width:' + ow + '%';
    },
    newWidth() {
      let nw = 50;
      let total = this.oldStudent + this.newStudent;
      if (total > 0) {
        let percentage = (this.newStudent / total) * 100;
        nw = percentage.toFixed(2);
      }
      return 'width:' + nw + '%';
    },
  },
  methods: {
    initHeight() {
      console.log('当前高度',this.$refs.capsuleChart.offsetHeight)
      console.log('初始化父传入',this.leftUpBoxHeight)
      this.$refs.capsuleChart.style.height = (this.leftUpBoxHeight - 70) + 'px';
    }
  }
}
</script>

<style scoped lang="scss">

::v-deep .dv-capsule-chart .capsule-item .capsule-item-column {
  width: 100%;
  height: 20px;
}

::v-deep .unit-label {
  opacity: 0;
}

::v-deep .unit-text {
  opacity: 0;
}


::v-deep .dv-capsule-chart .capsule-item {
  height: 20px;
  margin: 0px 0px;
}

::v-deep .dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
  font-size: 18px;
}

::v-deep .dv-capsule-chart .label-column {
  font-size: 18px;
  vertical-align: middle;
}

::v-deep .unit-label{
  font-size: 18px;
}

.data-base {
  width: 100%;
  padding: 20px;
}
.student {
  display: flex;
  align-items: center;
}
.old_student {
  font-size: 1.05rem;
  color: #00fcff;
}
.progress {
  width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  margin: 0 1rem 1.5rem .8rem;
  .progress_old {
    height: 1.31rem;
    background: linear-gradient(0deg, #0ed7ee, #0076ff);
    border-radius: 1rem 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .progress_new {
    height: 1.31rem;
    background: linear-gradient(0deg, #ffe970, #ffb155);
    border-radius: 0 1rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.new_student {
  font-size: 1.05rem;
  color: #ffe56e;
}
</style>
